<template>
  <div class="app-container">
    <table-search @onSearch="getTraces" @onReset="handleReset">
      <template slot="search">
        <date-group @success="handleDate" />
      </template>
    </table-search>
    <table-page :data="list" :loading="loadingTableVisible" :where="listQuery" :total="total">
      <template slot="column">
        <el-table-column label="编号" prop="id" align="center" width="80" />
        <el-table-column label="类型" prop="type" align="center" width="100" />
        <el-table-column label="耗时" prop="duration" align="center" width="100" />
        <el-table-column label="路径" prop="path">
          <template slot-scope="{row}">
            <a class="list-a" href="javascript:void(0)" @click="getTrace(row)">{{ row.path }}</a>
          </template>
        </el-table-column>
        <el-table-column label="登陆IP地址" prop="creationIpAddress" align="center" width="150">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.clientAddress"
              placement="right-start"
            >
              <span>{{ scope.row.creationIpAddress }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="执行时间" prop="creationTime" align="center" width="150">
          <template slot-scope="scope">
            <div v-html="$htmlFunction.parseTime(scope.row.creationTime)" />
          </template>
        </el-table-column>
      </template>
    </table-page>
    <el-dialog :visible.sync="dialogLogVisible" title="日志详情">
      <json-viewer :value="temp" />
    </el-dialog>
  </div>
</template>

<script>
import TablePage from '@/components/TablePage'
import TableSearch from '@/components/TableSearch'
import DateGroup from '@/components/DateGroup'
import JsonViewer from 'vue-json-viewer'

export default {
  name: 'TraceLog',
  components: { TablePage, TableSearch, DateGroup, JsonViewer },
  data() {
    const listDefault = {
      page: 1,
      limit: 20,
      startTime: undefined,
      endTime: undefined
    }
    return {
      listQuery: listDefault,
      list: [],
      total: 0,
      loadingTableVisible: true,
      dialogLogVisible: false,
      temp: undefined
    }
  },
  created() {
    this.getTraces()
  },
  methods: {
    getTraces: function() {
      this.loadingTableVisible = true
      this.$post('/log/trace/list', this.listQuery)
        .then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.loadingTableVisible = false
        })
        .catch(() => {
          this.loadingTableVisible = false
        })
    },
    getTrace: function() {
      const loading = this.$loading({ text: '正在加载数据...' })
      this.$get('/log/trace/' + row.id)
        .then(response => {
          loading.close()
          this.dialogLogVisible = true
          this.temp = response.data
        })
        .catch(() => {
          loading.close()
        })
    },
    handleReset: function() {
      this.listQuery = this.listDefault
    },
    handleDate: function(startTime, endTime) {
      this.listQuery.startTime = startTime
      this.listQuery.endTime = endTime
    }
  }
}
</script>
